<template>
  <div class="business-plan-detail-view view-container">

    <header-module
      left-custom
      padding
    >
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">精细招商规划：{{ datas.planInfo.planName }}</span>

          <el-tag
            v-if="datas.planInfo.flowStatus=='DOING'"
            size="small"
            type="warning"
          >
            {{ getLabel('approval_result', datas.planInfo.flowStatus) }}
          </el-tag>
          <el-tag
            v-else-if="datas.planInfo.flowStatus && datas.planInfo.flowStatus!=='AGREE'"
            size="small"
            type="warning"
          >审核不通过
          </el-tag>
          <el-tag
            v-else
            size="small"
            type="warning"
          >{{ getState(datas.planInfo.planStatus) }}</el-tag>
        </div>
      </template>

      <template #btn>
        <el-button
          class="main-btn"
          size="small"
          @click="onBack"
        >返回</el-button>
        <template v-if="datas.planInfo.id">
          <el-button
            v-auth="{v:['crm:finePlan:pms'],bool:datas.planInfo.planStatus == 1 || datas.planInfo.planStatus == -1 || datas.planInfo.flowStatus=='REJECT_INITIATOR'}"
            class="delete-btn"
            size="small"
            @click="onDelete"
          >删除
          </el-button>
          <el-button
            v-auth="{v:['crm:finePlan:pms'],bool:datas.planInfo.planStatus == 1 || datas.planInfo.planStatus == -1 || datas.planInfo.flowStatus=='REJECT_INITIATOR'}"
            class="main-btn"
            size="small"
            type="primary"
            @click="onEdit"
          >编辑
          </el-button>

          <el-button
            v-auth="{v:['crm:finePlan:pms'],bool:datas.planInfo.planStatus == 1 || datas.planInfo.planStatus == -1 || datas.planInfo.flowStatus=='REJECT_INITIATOR'}"
            class="main-btn"
            size="small"
            type="primary"
            @click="onAudit"
          >提交审核
          </el-button>
          <el-button
            v-auth="{v:['crm:finePlan:end'],bool:datas.planInfo.planStatus == 3}"
            class="main-btn"
            size="small"
            type="primary"
            @click="endPlan"
          >结束招商
          </el-button>
        </template>

      </template>

    </header-module>

    <div class="main-content">
      <div
        class="info-container"
        style="margin-bottom:20px"
      >
        <information :datas="datas" />
      </div>
      <el-tabs
        v-model="activeName"
        class="elTabs"
        @tab-click="handleClick"
      >
        <!--
        <el-tab-pane
          label="基本信息"
          name="first"
        >
          <information :datas="datas" />
        </el-tab-pane>
        -->
        <el-tab-pane
          label="招商终端明细"
          name="second"
        >
          <terminal-detail :datas="datas" />
        </el-tab-pane>
        <!--
        <el-tab-pane
          label="修改记录"
          name="third"
        >
          <operation-view />
        </el-tab-pane>
        -->
      </el-tabs>

    </div>

  </div>
</template>

<script>
import {
  defineAsyncComponent,
  defineComponent,
  getCurrentInstance,
  inject,
  onBeforeMount,
  reactive,
  ref,
  toRefs,
} from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent({
  name: 'Index',
  components: {
    information: defineAsyncComponent(() =>
      import('./modules/information.vue')
    ),
    terminalDetail: defineAsyncComponent(() =>
      import('./modules/terminalDetail.vue')
    ),
  },
  setup() {
    const currentInstance = getCurrentInstance()
    const route = useRoute()
    const router = useRouter()
    const api = inject('api')
    var data = reactive({
      datas: {
        planInfo: {},
        planDetail: [],
      },
    })
    var activeName = ref('second')

    const handleClick = () => {}

    onBeforeMount(() => {
      if (route.query.id) {
        getDetail(route.query.id)
      }
    })

    const getDetail = (id) => {
      api.plan.GET_PLAN_DETAIL({ id: id }).then((res) => {
        if (res.code) {
          currentInstance.proxy.customMessage({
            type: 'error',
            message: res.msg,
          })
        } else {
          data.datas = res.data.plan

          data.datas.planDetail.forEach((item) => {
            if (item.sellEarnestMoney) {
              item.salesStr = '¥' + item.sellEarnestMoney
            }
            if (item.devEarnestMoney) {
              item.exploitPrice = '¥' + item.devEarnestMoney
            }

            if (item.terProvinceName) {
              item.area = item.terProvinceName
            }
            if (item.terCityName) {
              item.area = item.area + '/' + item.terCityName
            }
            if (item.terAreaName) {
              item.area = item.area + '/' + item.terAreaName
            }
          })
        }
      })
    }

    const onBack = () => {
      console.log(router)
      router.back()
    }

    const getState = (state) => {
      if (!state) {
        return ''
      }
      switch (state) {
        case '-1':
          return '审核未通过'
        case '1':
          return '草稿'
        case '2':
          return '审核中'
        case '3':
          return '进行中'
        case '4':
          return '已结束'
      }
    }

    const onAudit = () => {
      currentInstance.proxy
        .alertBox({
          message: '是否提交审核该规划？',
          title: '审核',
        })
        .then(() => {
          if (checkTermina()) {
            api.plan
              .PLAN_CHECK_COMMIT({ id: data.datas.planInfo.id })
              .then((res) => {
                if (res.code) {
                  currentInstance.proxy.customMessage({
                    type: 'error',
                    message: res.msg,
                  })
                } else {
                  currentInstance.proxy.customMessage({
                    type: 'success',
                    message: '提交成功',
                  })
                  getDetail(data.datas.planInfo.id)
                }
              })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const checkTermina = () => {
      if (!data.datas.planDetail.length) {
        currentInstance.proxy.customMessage({
          type: 'error',
          message: '请添加终端',
        })
        return false
      } else {
        for (let i = 0; i < data.datas.planDetail.length; i++) {
          const ter = data.datas.planDetail[i]
          if (!ter.expireTime) {
            currentInstance.proxy.customMessage({
              type: 'error',
              message: '请选择' + ter.terminalName + '终端的截止日期',
            })
            return false
          }
          if (!ter.devEarnestMoney) {
            currentInstance.proxy.customMessage({
              type: 'error',
              message: '请输入' + ter.terminalName + '终端的开发保证金',
            })
            return false
          }
        }

        return true
      }
    }

    const onDelete = () => {
      currentInstance.proxy
        .alertBox({
          message: '是否确认删除该规划？',
          title: '删除',
        })
        .then(() => {
          api.plan
            .PLAN_DELETE_BYID({ id: data.datas.planInfo.id })
            .then((res) => {
              if (res.code) {
                currentInstance.proxy.customMessage({
                  type: 'error',
                  message: res.msg,
                })
              } else {
                currentInstance.proxy.customMessage({
                  type: 'success',
                  message: '删除成功',
                })
                router.back()
              }
            })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const onEdit = () => {
      router.push({ name: 'planAdd', query: { id: data.datas.planInfo.id }})
    }

    const endPlan = () => {
      currentInstance.proxy
        .alertBox({
          message:
            '结束招商规划后，待开发、开发失败的终端将停止招商，确定结束？',
          title: '结束',
        })
        .then(() => {
          api.plan
            .PLAN_DETAIL_END({ id: data.datas.planInfo.id })
            .then((res) => {
              if (res.code) {
                currentInstance.proxy.customMessage({
                  type: 'error',
                  message: res.msg,
                })
              } else {
                currentInstance.proxy.customMessage({
                  type: 'success',
                  message: '操作成功',
                })
                getDetail(data.datas.planInfo.id)
              }
            })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    return {
      activeName,
      ...toRefs(data),

      handleClick,
      onBack,
      getState,
      onAudit,
      onDelete,
      onEdit,
      endPlan,
    }
  },
})
</script>

<style lang="scss" scoped>
</style>
